<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			
			.bg{
				width: 100%;
				height: 100vh;
				background-color: rgba(0,0,0,0.2);
				position: fixed;
				top: 0px;
				left: 0px;
			}
			
			#calc{
				width: 350px;
				height: 400px;
				background-color: white;
				margin:100px auto;
				padding: 20px ;
				box-sizing: border-box;
			}
			
			.title{
				display: flex;
				justify-content: space-between;
			}
			
			.title span{
				cursor: pointer;
			}
			
			#ipt{
				width: 100%;
				height: 40px;
				margin-top: 20px;
				outline: none;
				text-indent: 5px;
				border-radius: 5px;
				border: 1px solid gray;
			}
			
			.keyBtn{
				margin-top:20px;
				margin-left: 10px;
				
			}
			
			.keyBtn input{
				width: 60px;
				height: 40px;
				margin-right: 10px;
				margin-top: 15px;
			}
		</style>
	</head>
	<body>
		<button onclick="openWin()">计算器</button>
	
		<div class="bg">
			<div id="calc">
			<div class="title">
				<h3>计算器</h3>
				<span onclick="closeWin()"> &times; </span>
			</div>
			<input type="text" placeholder="请输入" id="ipt" />
			
			<div class="keyBtn">
				<input type="button" value="0" onclick="calc('0')" />
				<input type="button" value="1" onclick="calc('1')" />
				<input type="button" value="2" onclick="calc('2')" />
				<input type="button" value="3" onclick="calc('3')" />
				<input type="button" value="4" onclick="calc('4')" />
				<input type="button" value="5" onclick="calc('5')" />
				<input type="button" value="6" onclick="calc('6')" />
				<input type="button" value="7" onclick="calc('7')" />
				<input type="button" value="8" onclick="calc('8')" />
				<input type="button" value="9" onclick="calc('9')" />
				<input type="button" value="+" onclick="calc('+')" />
				<input type="button" value="-" onclick="calc('-')" />
				<input type="button" value="*" onclick="calc('*')" />
				<input type="button" value="/" onclick="calc('/')" />
				<input type="button" value="C" onclick="calc('C')" />
				<input type="button" value="=" onclick="calc('=')" />
			</div>		
		</div>
	</div>
		
		<script>
			function closeWin(){
				document.getElementsByClassName("bg")[0].style.display = "none";
			}
			
			function openWin(){
				document.getElementsByClassName("bg")[0].style.display = "block";
			}
			var oIpt = document.getElementById('ipt');
			function calc(key){
				switch(key){
					case "C":
						oIpt.value = "";
						break;
					
					case "=":
						oIpt.value = eval(oIpt.value);
						break;         
					
					default:
						oIpt.value += key;
						break;
				}
			}
		</script>
	</body>
</html>
